<html>

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
        />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>proxyVue</title>
        <style>
            #app {
                margin: 100px auto 0 auto;
                width: 300px;
            }

            #btn {
                margin: 10px auto;
            }

            #showList {
                /* visibility: hidden; */
                display: none;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <input type="text" v-model="num" />
            <input id="btn" type="button" value="添加到Todolist" v-click="addList" />
            <br/>
            <button id="showList" v-click="initList">历史数据</button>
            <span>您输入的是
                <b>:</b>
            </span>
            <span v-bind="num"></span>
            <ul id="list"></ul>
        </div>
    </body>

    <script>
        class proxyVue {
            constructor(options) {
                this.$options = options || {};
                this.$methods = this._methods = this.$options.methods;
                const data = (this._data = this.$options.data);
                this.subscribe = {};
                this.observe(data);
                this.compile(options.el);
            }
            publish(watcher) {
                if (!this.subscribe[watcher.property])
                    this.subscribe[watcher.property] = [];
                this.subscribe[watcher.property].push(watcher);
            }
            observe(data) {
                const that = this;
                let handler = {
                    get(target, property) {
                        return target[property];
                    },
                    set(target, property, value) {
                        let res = Reflect.set(target, property, value);
                        that.subscribe[property].map(item => {
                            item.update();
                        });
                        return res;
                    }
                };
                this.$data = new Proxy(data, handler);
            }
            compile(el) {
                let argumengs;
                if (Object.prototype.toString.call(el) === "[object HTMLSpanElement]") {
                    argumengs = document.getElementsByTagName(el.nodeName.toLowerCase())[0].children;
                } else {
                    argumengs = document.querySelector(el).children;
                };
                const nodes = Array.prototype.slice.call(argumengs);
                let data = this.$data;
                nodes.map(node => {
                    if (node.children.length > 0) this.compile(node);
                    if (node.hasAttribute("v-bind")) {
                        let property = node.getAttribute("v-bind");
                        this.publish(new Watcher(node, "innerHTML", data, property));
                    }
                    if (node.hasAttribute("v-model")) {
                        let property = node.getAttribute("v-model");
                        this.publish(new Watcher(node, "value", data, property));
                        node.addEventListener("input", () => {
                            data[property] = node.value;
                        });
                    }
                    if (node.hasAttribute("v-click")) {
                        let methodName = node.getAttribute("v-click");
                        let mothod = this.$methods[methodName].bind(data);
                        node.addEventListener("click", mothod);
                    }
                });
            }
        }
        class Watcher {
            constructor(node, attr, data, property) {
                this.node = node;
                this.attr = attr;
                this.data = data;
                this.property = property;
            }
            update() {
                this.node[this.attr] = this.data[this.property];
            }
        }
        // 渲染todolist列表
        const Render = {
            // 初始化
            init: function (arr) {
                const fragment = document.createDocumentFragment();
                for (let i = 0; i < arr.length; i++) {
                    const li = document.createElement("li");
                    li.textContent = arr[i];
                    fragment.appendChild(li);
                }
                list.appendChild(fragment);
            },
            addList: function (val) {
                const li = document.createElement("li");
                li.textContent = val;
                list.appendChild(li);
            }
        };
        // 实例化一个proxyVue
        window.onload = function () {
            let vm = new proxyVue({
                el: "#app",
                data: {
                    num: 0,
                    arr: ['test', 'aaa', 'bbb']
                },
                methods: {
                    initList() {
                        Render.init(this.arr);
                    },
                    addList() {
                        this.arr.push(this.num);
                        Render.addList(this.num);
                    }
                }
            });
            document.getElementById('showList').click();
        };
    </script>

</html>
